<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户信息</title>
	<link rel="stylesheet" type="text/css" href="../resources/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../resources/easyui/themes/icon.css">
	<script type="text/javascript" src="../resources/js/jquery.min.js"></script>
	<script type="text/javascript" src="../resources/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../resources/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>用户列表</h2>
	<div style="margin:20px 0;"></div>
	
	<div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addUser()">New User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">Remove User</a>
    </div>
    <table id="grid" class="easyui-datagrid" title="用户列表" style="width:700px;height:450px"
           toolbar="#toolbar" pagination="true"
           rownumbers="true" fitColumns="true" singleSelect="true">
    </table>

	<div id="userDetailView" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="userForm" method="post" novalidate style="margin:0;padding:20px 50px">
            <!-- <h3>用户详情</h3> -->
            <input id="userId" type="hidden" name="id" />
            <div style="margin-bottom:10px">
                <input name="userName" class="easyui-textbox" required="true" label="用户名:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="name" class="easyui-textbox" required="true" label="姓名:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="address" class="easyui-textbox" label="地址:" style="width:100%">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
	    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
	    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#userDetailView').dialog('close')">取消</a>
	</div>

</body>

<script type="text/javascript">
	$(function(){

        $table = $('#grid');
        $.ajax({
            type: "POST",
            url: "/learn/user/getAllUsers",
            data: "pageIndex="+($table.datagrid("getPager").pagination("options").pageNumber + 1)+"&pageSize="+$table.datagrid("getPager").pagination("options").pageSize,
            success: function(data){
                // alert(JSON.stringify(data));
                $table.datagrid({
                    columns:[[
                        {field:'id',title:'ID',width:50},
                        {field:'userName',title:'用户名',width:200},
                        {field:'name',title:'姓名',width:200},
                        {field:'address',title:'地址',width:500}
                    ]],
                    pageSize:10, //每页显示的记录条数，默认为10
                    pageList:[ 5, 10, 15, 20, 50 ], //可以设置每页记录条数的列表
                    pagination:true //分页控件
                }).datagrid('loadData', data.data.dataList);
                var pager = $table.datagrid('getPager');    // get the pager of datagrid
                pager.pagination({total: data.data.dataCount,
                    pageNumber: data.data.pageIndex,
                    pageSize: data.data.pageSize,
                    pageList:[ 5, 10, 15, 20, 50 ], //可以设置每页记录条数的列表
                    onSelectPage: function(pageNumber, pageSize){ // 用户选择一个新页面的时候触发。
                        $(this).pagination('loading');
                        // alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
                        $.ajax({
                            type: "POST",
                            url: "/learn/user/getAllUsers",
                            data: "pageIndex=" + ($table.datagrid("getPager").pagination("options").pageNumber) + "&pageSize=" + $table.datagrid("getPager").pagination("options").pageSize,
                            success: function (data) {
                                // alert(JSON.stringify(data));
                                $table.datagrid('loadData',data.data.dataList); // 重新加载列表
                                pager.pagination({
                                    total: data.data.dataCount,
                                    pageNumber: data.data.pageIndex,
                                    pageSize: data.data.pageSize,
                                    pageList: [5, 10, 15, 20, 50], //可以设置每页记录条数的列表
                                    pagination:true //分页控件
                                });
                            }
                        });

                        $(this).pagination('loaded');
                    }
                });
            }
        });

        /*$table.datagrid({
			url:'/learn/user/getAllUsers',
            queryParams: { // 传入新的分页参数
                "pageIndex" : function(){
                    return $table.datagrid("getPager").pagination("options").pageNumber + 1;
                },
                "pageSize" : function(){
                    return $table.datagrid("getPager").pagination("options").pageSize;
                }
            },
			columns:[[
				{field:'id',title:'ID',width:50},
				{field:'userName',title:'用户名',width:200},
				{field:'name',title:'姓名',width:200},
				{field:'address',title:'地址',width:500}
			]],
            pageSize:10, //每页显示的记录条数，默认为10
            pageList:[ 5, 10, 15, 20, 50 ], //可以设置每页记录条数的列表
            pagination:true //分页控件
		});*/

    });
	
	var url;
	var operType = null; // 操作类型：add -》新增，modify -》修改
	function addUser(){
		$("#userDetailView").dialog('open').dialog('center').dialog('setTitle','新增用户');
		$("#userForm").form('clear');
		url = '/learn/user/addUser';
        operType = 'add';
	}
	
	function editUser(){
		var row = $("#grid").datagrid('getSelected');
		//alert(JSON.stringify(row));
        operType = 'modify';
		if(row){
			$("#userDetailView").dialog('open').dialog('center').dialog('setTitle','编辑用户');
			$("#userForm").form('load',row);
			url = '/learn/user/editUser';
		}else{
			$.messager.alert('Error','请选中要编辑哪行记录！','error');
		}
	}
	
	function saveUser(){
	    //新增情况用表单方式提交，修改情况用json方式提交
        // alert(operType);
        if(operType!=null && operType=='add'){
            $("#userForm").form('submit',{
                url:url,
                onSubmit:function(){
                    return $(this).form('validate');
                },
                success:function(result){
                    var jsonResult = JSON.parse(result); // json字符串转json
                    if(jsonResult.code==0){
                        $("#userDetailView").dialog('close'); // 关闭dialog
                        // $("#grid").datagrid('reload'); // 重新加载列表
                        $table = $('#grid');
                        $.ajax({
                            type: "POST",
                            url: "/learn/user/getAllUsers",
                            data: "pageIndex=" + 1 + "&pageSize=" + $table.datagrid("getPager").pagination("options").pageSize,
                            success: function (data) {
                                // alert(JSON.stringify(data));
                                $table.datagrid({
                                    columns: [[
                                        {field: 'id', title: 'ID', width: 50},
                                        {field: 'userName', title: '用户名', width: 200},
                                        {field: 'name', title: '姓名', width: 200},
                                        {field: 'address', title: '地址', width: 500}
                                    ]],
                                    pageSize: 10, //每页显示的记录条数，默认为10
                                    pageList: [10, 20, 50, 100], //可以设置每页记录条数的列表
                                    pagination: true //分页控件
                                }).datagrid('loadData', data.data.dataList);
                                var pager = $table.datagrid('getPager');    // get the pager of datagrid
                                pager.pagination({
                                    total: data.data.dataCount,
                                    pageNumber: data.data.pageIndex,
                                    pageSize: data.data.pageSize,
                                    pageList: [5, 10, 15, 20, 50], //可以设置每页记录条数的列表
                                    onSelectPage: function (pageNumber, pageSize) { // 用户选择一个新页面的时候触发。
                                        $(this).pagination('loading');
                                        // alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
                                        $.ajax({
                                            type: "POST",
                                            url: "/learn/user/getAllUsers",
                                            data: "pageIndex=" + ($table.datagrid("getPager").pagination("options").pageNumber) + "&pageSize=" + $table.datagrid("getPager").pagination("options").pageSize,
                                            success: function (data) {
                                                // alert(JSON.stringify(data));
                                                $table.datagrid('loadData', data.data.dataList); // 重新加载列表
                                                pager.pagination({
                                                    total: data.data.dataCount,
                                                    pageNumber: data.data.pageIndex,
                                                    pageSize: data.data.pageSize,
                                                    pageList: [10, 20, 50, 100], //可以设置每页记录条数的列表
                                                    pagination: true //分页控件
                                                });
                                            }
                                        });

                                        $(this).pagination('loaded');
                                    }
                                });
                            }
                        });

                    }else{
                        $.messager.show({
                            title: 'Error',
                            msg: jsonResult.msg
                        });
                    }
                }

            })
        }else{
            // 将表单数据转换为json格式
            // var params = $("#userForm").serializeJson();
            //输出以数组形式序列化表单值
            var data = $('#userForm').serializeArray();
            var params = {};
            $.each(data,function(i,v){
                params[v.name] = v.value;
            });

            $.ajax({
                type : "post",
                dataType : "json",
                url : url,
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(params),
                success : function(result) {
                    if(result.code==0){
                        $("#userDetailView").dialog('close'); // 关闭dialog
                        // $("#grid").datagrid('reload'); // 重新加载列表

                        $table = $('#grid');
                        $.ajax({
                            type: "POST",
                            url: "/learn/user/getAllUsers",
                            data: "pageIndex=" + ($table.datagrid("getPager").pagination("options").pageNumber) + "&pageSize=" + $table.datagrid("getPager").pagination("options").pageSize,
                            success: function (data) {
                                // alert(JSON.stringify(data));
                                $table.datagrid({
                                    columns: [[
                                        {field: 'id', title: 'ID', width: 50},
                                        {field: 'userName', title: '用户名', width: 200},
                                        {field: 'name', title: '姓名', width: 200},
                                        {field: 'address', title: '地址', width: 500}
                                    ]],
                                    pageSize: 10, //每页显示的记录条数，默认为10
                                    pageList: [10, 20, 50, 100], //可以设置每页记录条数的列表
                                    pagination: true //分页控件
                                }).datagrid('loadData', data.data.dataList);
                                var pager = $table.datagrid('getPager');    // get the pager of datagrid
                                pager.pagination({
                                    total: data.data.dataCount,
                                    pageNumber: data.data.pageIndex,
                                    pageSize: data.data.pageSize,
                                    pageList: [5, 10, 15, 20, 50], //可以设置每页记录条数的列表
                                    onSelectPage: function (pageNumber, pageSize) { // 用户选择一个新页面的时候触发。
                                        $(this).pagination('loading');
                                        // alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
                                        $.ajax({
                                            type: "POST",
                                            url: "/learn/user/getAllUsers",
                                            data: "pageIndex=" + ($table.datagrid("getPager").pagination("options").pageNumber) + "&pageSize=" + $table.datagrid("getPager").pagination("options").pageSize,
                                            success: function (data) {
                                                // alert(JSON.stringify(data));
                                                $table.datagrid('loadData', data.data.dataList); // 重新加载列表
                                                pager.pagination({
                                                    total: data.data.dataCount,
                                                    pageNumber: data.data.pageIndex,
                                                    pageSize: data.data.pageSize,
                                                    pageList: [10, 20, 50, 100], //可以设置每页记录条数的列表
                                                    pagination: true //分页控件
                                                });
                                            }
                                        });

                                        $(this).pagination('loaded');
                                    }
                                });
                            }
                        });

                    }else{
                        $.messager.show({
                            title: 'Error',
                            msg: jsonResult.msg
                        });
                    }
                }
            });
        }
        operType = null;
	}
	
	function deleteUser(){
		var row = $("#grid").datagrid('getSelected');
		if(row){
			$.messager.confirm('Confirm','您确认删除这条数据吗？',function(r){
				if(r){
					$.post("/learn/user/delete/"+row.id,function(result){
						var jsonResult = JSON.parse(result); // json字符串转json
						if(jsonResult.code==0){
							$("#grid").datagrid('reload'); // 重新加载列表
						}else{
							$.messager.show({
								title:'Error',
								msg: jsonResult.msg
							});
						}
					})
				}
			});
		}else{
			$.messager.alert('Error','请选中要删除哪行记录！','error');
		}
	}

</script>
</html>